<template>
	<view class="content">
		<!-- <view class="cpt-mask">{{count}}秒</view> -->
		<swiper :indicator-dots="true"  :interval="3000"  :duration="1000"  class="swiper"
			 :style="{'height':windowHeight}" :current="swiperCurrent"  @change="handleSwperChange">>
			<swiper-item
				class="item"
				v-for="(item, index) in bannerList" :key="index">
						<image :src="item.image_url" mode="aspectFill" :style="{'height':windowHeight,'width':'100%'}"></image>
					</swiper-item>   
		</swiper>
		<view class="addSite" @click="toHome" v-if="total == swiperCurrent+1">
			<view class="add">
				立即体验
			</view>
		</view>        
	</view>
</template>
<script>
	import {bannerList} from "@/common/api.js";
	export default {
		data() {
			return {
				bannerList: [],
				windowHeight: '603px', //定义手机屏幕高度值变量  
				count:'5',
				swiperCurrent: 0,
				total:0
			}
		},
		created () {
		    //this.goGrdoupRecor();
		  },
		onLoad() {
			bannerList(this,{cid:2});
			var _me = this;
			uni.getSystemInfo({ //获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                
				success: function(res) {
					_me.windowHeight = res.windowHeight + 'px';
				}
			});
		},
		methods: {
			 goGrdoupRecor(){
			    const TIME_COUNT = 5;
			    if(!this.timer){
			      this.count = TIME_COUNT;
			      this.show = false;
			      this.timer = setInterval(()=>{
			        if(this.count > 0 && this.count <= TIME_COUNT){
			          this.count--;
			        }else{
			          this.show = true;
			          clearInterval(this.timer);
			          this.timer = null;
			          //跳转的页面写在此处
					   uni.switchTab({
						 url: '/pages/tabBar/home'
					   });
			        }
			      },1000)
			    }
		},
		handleSwperChange(e){
			this.swiperCurrent = e.detail.current;
		},
		toHome(){
			uni.switchTab({
				url: '/pages/tabBar/home'
			});
		}
	},
	}
</script>
<style>
	.swiper {
		width: 100%;
	}
	.cpt-mask {  
		position: fixed;
		top: 30px;
		left: 15px;
		z-index: 99; 
	}
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: fixed;
		bottom: 160rpx;
		left: 80rpx;
		background-color: #20CBD4;
		border-radius: 60rpx;
		font-size: 30rpx;
	}
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
	}
</style>
